<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户认证管理平台</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        .navbar {
            background-color: #333;
            overflow: hidden;
            position: fixed; /* 固定导航栏 */
            top: 0; /* 顶部对齐 */
            width: 100%; /* 宽度100% */
            z-index: 1000; /* 确保导航栏在其他内容之上 */
        }

        .navbar a, .navbar button {
            float: left;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 20px;
            text-decoration: none;
            background-color: #333;
        }

        .navbar a:hover, .navbar button:hover {
            background-color: #ddd;
            color: black;
        }

        .navbar a.active, .navbar button.active {
            background-color: #00BFFF;
            color: black;
        }

        .main {
            padding: 33px;
            display: none; /* Initially hide all sections */
        }

        /* 弹出窗口的样式 */
        .modal {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            width: 96%; /* 宽度调整为页面的90% */
            height: 85%; /* 高度调整为页面的80% */
            position: relative;
            top: 8%; /* 距离顶部5% */
            left: 1%; /* 距离左侧5% */
            overflow: auto;
        }

        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        /* 关闭按钮的 hover 效果 */
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        /* 容器样式 */
        .container {
            display: flex; /* 启用flex布局 */
            justify-content: space-between; /* 项目之间的间距 */
            align-items: center; /* 垂直居中 */
        }

        /* 子元素样式 */
        .left, .center, .right {
            background-color: #f0f0f0;
            padding: 20px;
            flex: 1; /* 每个子元素占据相同的空间 */
            min-width: 150px; /* 可根据需要调整最小宽度 */
        }

        .center {
            background-color: #d0d0d0;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 2px;
        }
    </style>
    <script th:src="@{/js/crypto-js.min.js}"></script>
    <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script th:src="@{/js/jsencrypt.js}"></script>
</head>
<body>

<div class="navbar">
    <a href="/" class="active">首页</a>
    <a href="/user">用户管理</a>
    <a href="/role">角色管理</a>
    <a href="/app">应用管理</a>
    <a href="/db/h2" target="_blank">数据库</a>
    <a href="/about">关于我们</a>
    <a href="/mock">定义参数</a>
    <a href="/material">设备管理</a>
</div>
<div class="main home" id="home" style="display: block">
    <h1>投标信息化平台</h1>
<!--    输入一段介绍-->
    <span>投标信息化管理：设备管理、产品管理、方案管理</span>
    <p/>
<!--    <h1>用户认证管理平台</h1>-->
<!--    <h3>用户统计</h3>-->
<!--    <h3>角色统计</h3>-->
<!--    <h3>应用统计</h3>-->
<!--    <h3>登录统计</h3>-->
    <img src="/img/elves.png" style="width: 16%;"></img>
<!--    <span>An application that manager user.</span>-->
</div>
<!--<div class="footer">-->
<!--    <p>Copyright &copy; 2024 By Elves </p>-->
<!--</div>-->
</body>
</html>